<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/common.jsp"%>
<title>广告新增</title>
<script src="${ctx}/js/plupload.full.min.js"></script>
<script src="${ctx}/js/qiniu.min.js"></script>
<script type="text/javascript" src="${ctx}/lib/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form" action="" method="post">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>广告标题：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" placeholder="" id="title" name="title" required="true">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">广告描述：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" id="description" name="description">
            </div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>广告图片：</label>
			<img id="showImage" width='120' height='120' class='product-thumb' onerror="this.src='${ctx}/images/pic_default.png'" src=''>
		</div>
		<div class="row cl">
            <div id="container" class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-3">
                <button id="pickfiles" class="btn radius" type="button"><i class="Hui-iconfont">&#xe642;</i> 上传</button>
            	<input id="image" type="hidden" value=""/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>指向链接：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" placeholder="" id="url" name="url" required="true">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开始日期：</label>
            <div class="formControls col-xs-8 col-sm-8">
               <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" id="logmin" class="input-text Wdate" style="width:160px;">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>截止日期：</label>
            <div class="formControls col-xs-8 col-sm-8">
              <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'logmin\')}'})" id="logmax" class="input-text Wdate" style="width:160px;">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>排序：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" placeholder="" id="sort" name="sort" required="true">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-3">
                <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
            </div>
        </div>
    </form>
</article>

<script type="text/javascript">
var uploader = Qiniu.uploader({
	runtimes : 'html5,flash,html4', // 上传模式，依次退化
	browse_button : 'pickfiles', // 上传选择的点选按钮，必需
	filters : {
		mime_types : [ {
			title : "Image files",
			extensions : "jpg,gif,png"
		} ]
	},//上传的文件类型
	// 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置
	// 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func
	// 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func
	uptoken_func : function(file) { // 在需要获取uptoken时，该方法会被调用
		var uptoken = "";
		$.ajax({
			type : 'GET',
			url : ctx + '/upload/getUploadToken.do',
			async : false,
			cache : false,
			data : {},
			dataType : 'json',
			timeout : 30000,
			context : $('body'),
			success : function(data) {
				if (data.code == "ok") {
					uptoken = data.object;
				} else {
					layer.msg(data.msg,{icon: 5,time:2000});
				}
			}
		});
		return uptoken;
	},
	get_new_uptoken : false, // 设置上传文件的时候是否每次都重新获取新的uptoken
	// downtoken_url: '/downtoken',
	// Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
	unique_names : true, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
	// save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
	domain : '${domain}', // bucket域名，下载资源时用到，必需
	container : 'container', // 上传区域DOM ID，默认是browser_button的父元素
	max_file_size : '1mb', // 最大文件体积限制
	flash_swf_url : 'path/of/plupload/Moxie.swf', //引入flash，相对路径
	max_retries : 3, // 上传失败最大重试次数
	dragdrop : true, // 开启可拖曳上传
	drop_element : 'container', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
	chunk_size : '1mb', // 分块上传时，每块的体积
	auto_start : true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
	//x_vars : {
	//    查看自定义变量
	//    'time' : function(up,file) {
	//        var time = (new Date()).getTime();
	// do something with 'time'
	//        return time;
	//    },
	//    'size' : function(up,file) {
	//        var size = file.size;
	// do something with 'size'
	//        return size;
	//    }
	//},
	init : {
		'FilesAdded' : function(up, files) {
			plupload.each(files, function(file) {
				// 文件添加进队列后，处理相关的事情
			});
		},
		'BeforeUpload' : function(up, file) {
			// 每个文件上传前，处理相关的事情
		},
		'UploadProgress' : function(up, file) {
			// 每个文件上传时，处理相关的事情
		},
		'FileUploaded' : function(up, file, info) {
			layer.msg('上传成功！',{icon: 6,time:2000});
			// 每个文件上传成功后，处理相关的事情
			// 其中info是文件上传成功后，服务端返回的json，形式如：
			// {
			//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
			//    "key": "gogopher.jpg"
			//  }
			// 查看简单反馈
			// var domain = up.getOption('domain');
			var res = JSON.parse(info);
			// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
			//alert(res.key);

			var domain = '${domain}';
			var imgLink = domain + "/" + res.key;
			$("#showImage").attr("src", imgLink);
			$("#image").val(imgLink);
				
		},
		'Error' : function(up, err, errTip) {
			layer.msg(errTip,{icon: 5,time:2000});
			//上传出错时，处理相关的事情
		},
		'UploadComplete' : function() {
			//队列文件处理完毕后，处理相关的事情
		},
		'Key' : function(up, file) {
			// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
			// 该配置必须要在unique_names: false，save_key: false时才生效

			var key = "";
			// do something with key here
			return key
		}
	}
});
</script>

<script type="text/javascript">
$(document).ready(function () {
	 $('#form').bind('submit', function () {
		var title = $("#title").val();
		var description = $("#description").val();
		var image = $("#image").val();
		var url = $("#url").val();
		var startDate = $("#logmin").val();
		var endDate = $("#logmax").val();
		var sort = $("#sort").val();
		$.ajax({
			type : 'POST',
			url : ctx + '/advertisementManage/addAdvertisement.do',
			data : {
				title : title,
				description : description,
				image : image,
				url : url,
				startDate : startDate,
				endDate : endDate,
				sort : sort
			},
			dataType : 'json',
			timeout : 30000,
			context : $('body'),
			success : function(data) {
				if (data.code == "ok") {
                   layer.msg("保存成功!", {icon: 6, time: 1000}, function () {
                   		layer_close();
                   });
				} else {
					 layer.msg(data.msg, {icon: 5, time: 2000});
				}
			},
			error : function(xhr, type) {
				layer.msg('保存失败!', {icon: 5, time: 2000});
			}
		});
		  return false;
	 });
});
</script>
</body>
</html>